<script setup lang="ts">
import { ref } from "vue";
import { RouterView } from "vue-router";
import ScaleScreen from "@/components/scale-screen";
import Headers from "./header.vue";
import Setting from "./setting.vue";
import { useSettingStore } from "@/stores/index";
import { storeToRefs } from "pinia";
import MessageContent from "@/components/Plugins/MessageContent";

const settingStore = useSettingStore();
const { isScale } = storeToRefs(settingStore);
const wrapperStyle = {};
</script>

<template>
  <ScaleScreen
    width="1920"
    height="1080"
    :delay="500"
    :fullScreen="false"
    :boxStyle="{
      background: '#162840',
      overflow: isScale ? 'hidden' : 'auto',
    }"
    :wrapperStyle="wrapperStyle"
    :autoScale="isScale"
  >
    <div class="content_wrap" id="content_wrap">
      <div class="bigtcontent">
        <Headers />
        <RouterView />
        <MessageContent />
      </div>
    </div>
  </ScaleScreen>
  <Setting />
</template>
<style lang="scss" scoped>

.content_wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // background-image: url("@/assets/img/u2.png");
  // background-size: cover;
  // background-position: center center;
  .bigtcontent{
  width: 100%;
  height: 100%;
  padding: 16px 12px 16px 12px;
  background-image: url("@/assets/imgs/preview.webp");
  background-size: 100% 120px;
  background-repeat: no-repeat;
  // background-position: top;
  // background-image: url("@/assets/img/u2.png");
  // background-size: 100% 100%;
  // background-size: cover;
  // background-position: center center;
}
}
</style>
